"use client";

import { Switch } from "@ark-ui/react/switch";
import { CreditCard } from "lucide-react";

export default function SwitchInCardWithIcon() {
  return (
    <div className="bg-white dark:bg-gray-800 w-full px-4 py-12 rounded-xl flex items-center justify-center">
      <div className="w-full max-w-md">
        <Switch.Root className="flex items-start gap-3 p-4 border border-gray-200 rounded-lg bg-white hover:bg-gray-50 transition-colors duration-200 dark:border-gray-700 dark:bg-gray-800 dark:hover:bg-gray-750">
          <div className="shrink-0">
            <div className="w-10 h-10 bg-linear-to-br from-orange-400 to-red-500 rounded-lg flex items-center justify-center">
              <CreditCard className="w-5 h-5 text-white" />
            </div>
          </div>
          <div className="flex-1 min-w-0">
            <div className="flex items-center justify-between mb-1">
              <div className="flex items-center gap-2">
                <Switch.Label className="text-base font-medium text-gray-900 dark:text-gray-100">
                  Label
                </Switch.Label>
                <span className="text-sm text-gray-500 dark:text-gray-400">
                  (Sublabel)
                </span>
              </div>
              <Switch.Control className="relative inline-flex w-7 p-0.5 items-center rounded-full bg-gray-300 transition-colors duration-200 ease-in-out data-[state=checked]:bg-blue-500 data-focus-visible:ring-2 data-focus-visible:ring-gray-300/50 data-[state=checked]:data-focus-visible:ring-blue-500/50 dark:bg-gray-600 dark:data-[state=checked]:bg-blue-500 shrink-0">
                <Switch.Thumb className="w-3 h-3 rounded-full bg-white shadow-sm transition-transform duration-200 ease-in-out data-[state=checked]:translate-x-full" />
              </Switch.Control>
            </div>
            <p className="text-sm text-gray-600 dark:text-gray-400">
              A short description goes here.
            </p>
          </div>
          <Switch.HiddenInput />
        </Switch.Root>
      </div>
    </div>
  );
}
